<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*,
						org.apache.catalina.manager.util.SessionUtils,
						com.ophelisis.common.util.CommonUtils,
						com.ophelisis.common.consts.ConstPath,
						com.ophelisis.actions.system.*,
						com.ophelisis.persistence.domain.MenuGroupVO,
						com.ophelisis.persistence.domain.MenuVO"%>
						
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="page" uri="/tld/xdp-page.tld"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%=ConstPath.siteTitle%></title>
<link href="css/homepage.css" rel="stylesheet" />
<link href="css/jquery.alerts.css" rel="stylesheet" />
<link href="css/calendar/ui.all.css" rel="stylesheet" />
<link href="css/fullcalendar/theme.css" rel="stylesheet" />
<link href="css/fullcalendar/fullcalendar.css" rel="stylesheet" />
<link href="css/fullcalendar/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="js/jquery-1.7.2.js"></script>
<script src="js/common.js"></script>
<script src="js/common.status.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.alerts.js"></script>
<script src="js/calendar/ui.datepicker.js"></script>
<script src="js/calendar/jquery.ui.datepicker-ko.js"></script>
<script src="js/fullcalendar/fullcalendar-ophelisis.js"></script>
<%
	String _userId = null;
    String _userNm = null;

    if (session != null) {
    	_userId = (String)session.getAttribute("userId");
    	_userNm = (String)session.getAttribute("userNm");
    }

    int lineMenuCount = 6;
%>
<script>
var slideInterval = "0";
var slideTime = "4000";
var currentMenuImage = 0;
var totalMenuImage = "${menuImageCount}";
var isOverSpot = "N";
var isOverNavi = "N";

var slideMenuImage = {
		init: function() {
			$(".selector").hide();
			slideMenuImage.setUnbinding();
			slideMenuImage.setBinding();
			
			if (totalMenuImage > 0) {
				slideMenuImage.start();
				slideMenuImage.setLocation();
			}
		},
		
		setBinding: function() {
			/*
			var that = this;
			
			$("#spot").mouseover(function() {
				that.navigator("spot_over");
			}).mouseout(function() {
				that.navigator("spot_out");
			});

			$(".selector").mouseover(function() {
				that.navigator("navi_over");
			}).mouseout(function() {
				that.navigator("navi_out");
			});
			*/
		},
		
		setUnbinding: function() {
			$("#spot").unbind();
			$(".selector").unbind();
		},
		
		start: function() {
			if (slideInterval == "0") {
			    slideInterval = setInterval("slideMenuImage.load()", 0);
			} else {
				slideInterval = setInterval("slideMenuImage.load()", slideTime);
			}
		},
		 
		stop: function() {
			clearInterval(slideInterval);
		},
		
		navigator: function(cmd) {
			if (cmd == "spot_over") {
				isOverSpot = "Y";
				if (isOverNavi == "N") {
					$(".selector").show();
					this.stop();
				}
			} else if (cmd == "spot_out") {
				isOverSpot = "N";
				
				if (isOverNavi == "N") {
					$(".selector").hide();
					this.start();
				}
			} else if (cmd == "navi_over") {
				isOverNavi = "Y";
				
				if (isOverSpot == "N") {
					$(".selector").show();
					this.stop();
				}
			} else {
				isOverNavi = "N";
				
				if (isOverSpot == "N") {
					$(".selector").hide();
					this.start();
				}
			}
		},
		
		prev: function() {
			var selectMenuImage = "";
			
			if (currentMenuImage == 1) {
				selectMenuImage = totalMenuImage;
			} else {
				selectMenuImage = parseInt(currentMenuImage) - 1;
			}
			this.select(selectMenuImage);
		},
		
		next: function() {
			var selectMenuImage = "";
			
			if (currentMenuImage == totalMenuImage) {
				selectMenuImage = 1;
			} else {
				selectMenuImage = parseInt(currentMenuImage) + 1;
			}
			this.select(selectMenuImage);
		},
		
		select: function(num) {
			if (currentMenuImage == num) return;

			this.stop();
			$("#spotimage_" + num).css({opacity: 0.0}).addClass("mainshow").animate({opacity: 1.0}, (parseInt(slideTime) - 1000));
			$("#spotimage_" + currentMenuImage).animate({opacity: 0.0}, (parseInt(slideTime) - 1000)).removeClass("mainshow");
			$("#spotNum_" + currentMenuImage).removeClass("on");
			$("#spotNum_" + num).addClass("on");
			currentMenuImage = num;
			this.start();
		},

		load: function() {
			if (parseInt(currentMenuImage) + 1 > totalMenuImage) {
				this.select(1);
			} else {
				this.select(parseInt(currentMenuImage) + 1);
			}
		},
		
		setLocation: function() {
			var totalMenuCount = $(".navi").find("li").length;
			
			setObjectValue("#gnb", "height", Math.round(104 + (Math.ceil(totalMenuCount / <%=lineMenuCount%>) * 36)));
			
			var spotTop = parseInt($("#spot").offset().top);
			var spotHeight = parseInt($("#spot").css("height").replace("px",""));

			setObjectValue(".spotimages", "top", Math.round(spotTop));
			setObjectValue(".selector", "top", Math.round(spotTop + (spotHeight / 2) - 17));
			
			var naviWidth = parseInt($("#navigator").css("width").replace("px",""));
			var spotNumWidth = parseInt($("#spotNum a").length * 10);

			setObjectValue("#spotNum", "left", Math.round((naviWidth - spotNumWidth) / 2));
		}
};

var gnbModule = {
		goMenu: function(groupId, menuId, menuNm, action) {
			$("#_groupId").val(groupId);
			$("#_menuId").val(menuId);
			if (menuNm != "") {
				$("#_menuNm").val(menuNm);
			}
			$("#linkForm").attr("action", action);
			$("#linkForm").submit();
		}
};

$(document).ready(function(){
	slideMenuImage.init();
});

$(window).resize(function(){
	slideMenuImage.setLocation();
});
</script>
</head>
<body>
<div id="warp">
	<form id="linkForm" name="linkForm" method="post">
		<input type="text" id="_groupId" name="_groupId" value="${_groupId}" />
		<input type="text" id="_menuId" name="_menuId" value="${_menuId}" />
		<input type="text" id="_menuNm" name="_menuNm" value="${_menuNm}" />
	</form>
	<!-- container Start -->
	<div id="container">
		<!-- GNB Start -->
		<div id="gnb">
			<div class="logo">
				<img src="logoFileDownload.action?fileName=${logoFileName}" class="clickable" onclick="javascript:location.href='home.action';" />
			</div>
			<div class="navi">
				<ul>
					<li><a href="#" class="clickable <c:if test="${_groupId == '0'}">on</c:if>" onclick="javascript:gnbModule.goMenu('0','0','메인화면','home.action');">Home<BR/>메인화면</a></li>
					<c:choose>
						<c:when test="${homeMenuGroupList != '' && !empty homeMenuGroupList}">
							<c:set var="lineMenuCount" value="<%=lineMenuCount%>" />
							<c:forEach var="menulist" items="${homeMenuGroupList}" varStatus="status">
								<c:if test="${status.count == lineMenuCount}"></ul><ul></c:if>
								<li><a href="#" class="clickable <c:if test="${_groupId == menulist.menuGroupId}">on</c:if>" onclick="javascript:gnbModule.goMenu('${menulist.menuGroupId}','0','${menulist.menuGroupNm}','${menulist.menuGroupLink}');">${menulist.menuGroupAlias}<BR/>${menulist.menuGroupNm}</a></li>
							</c:forEach>
						</c:when>
					</c:choose>
				</ul>
			</div>
		</div>
		<div id="menuimage">
			<c:choose>
				<c:when test="${menuImageList != '' && !empty menuImageList}">
					<c:forEach var="imgList" items="${menuImageList}" varStatus="status">
						<c:set var="fileOldArray" value="${fn:split(imgList.imageFileOld, '|')}" />
						<c:set var="fileNewArray" value="${fn:split(imgList.imageFileNew, '|')}" />
						<c:set var="fileWidthArray" value="${fn:split(imgList.imageFileWidth, '|')}" />
						<c:set var="fileHeightArray" value="${fn:split(imgList.imageFileHeight, '|')}" />
						<c:set var="fileThumbnailArray" value="${fn:split(imgList.imageFileThumbnail, '|')}" />
						<div id="spot">
							<c:if test="${fn:length(fileOldArray) > 0}">
								<c:forEach var="i" begin="0" end="${fn:length(fileOldArray) - 1}" step="1" varStatus="status">
									<div id="spotimage_${status.count}" class="spotimages">
										<img src="menuImageFileDownload.action?fileName=${fileNewArray[i]}" />
									</div>
								</c:forEach>
							</c:if>
						</div>
						<div id="prevImage" class="selector">
							<a href="javascript:slideMenuImage.prev();"></a>
						</div>
						<div id="nextImage" class="selector">
							<a href="javascript:slideMenuImage.next();"></a>
						</div>
						<c:if test="${fn:length(fileOldArray) > 1}">
							<div id="navigator">
								<div id="spotNum">
									<c:forEach var="i" begin="0" end="${fn:length(fileOldArray) - 1}" step="1" varStatus="status">
										<a href="javascript:slideMenuImage.select('${status.count}');" id="spotNum_${status.count}"></a>
									</c:forEach>
								</div>
							</div>
						</c:if>
					</c:forEach>
				</c:when>
			</c:choose>
		</div>
